jQuery에서 요소가 숨겨져 있는지 어떻게 확인합니까?

1
2
다음
질문이 단일 요소를 참조하므로이 코드가 더 적합 할 수 있습니다.
// display : [none | block]에 대한 CSS 내용을 확인하고 표시 여부를 무시합니다. [true | false]
$ (element) .is ( ": visible");
// 숨겨진 경우에도 동일하게 작동합니다.
$ (요소) .is ( ": 숨김");
twernt의 제안과 동일하지만 단일 요소에 적용됩니다. jQuery FAQ에서 권장하는 알고리즘과 일치합니다.
jQuery의 is ()를 사용하여 선택한 요소를 다른 요소, 선택기 또는 jQuery 객체로 확인합니다. 이 메소드는 전달 된 매개 변수를 충족하는 일치 항목을 찾기 위해 DOM 요소를 순회합니다. 일치하는 항목이 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.
|
숨겨진 선택기를 사용할 수 있습니다.
// 숨겨진 모든 요소와 일치
$ ( '요소 : 숨김')
그리고 보이는 선택기 :
// 보이는 모든 요소와 일치
$ ( '요소 : 표시')
|
if ($ (element) .css ( 'display') == 'none'|| $ (element) .css ( "visibility") == "hidden") {
// '요소'가 숨겨 짐
}
위의 방법은 부모의 가시성을 고려하지 않습니다. 부모도 고려하려면 .is ( ": hidden") 또는 .is ( ": visible")을 사용해야합니다.
예를 들면

 Div2 

위의 방법은 div2가 보이는 반면 : visible은 보이지 않습니다. 그러나 위의 내용은 많은 경우에 유용 할 수 있습니다. 특히 숨겨진 부모에 오류 div가 있는지 찾아야 할 때 유용 할 수 있습니다. 이러한 조건에서는 : visible이 작동하지 않기 때문입니다.
|
이 답변 중 어느 것도 내가 "가시성 : 숨겨진 항목을 어떻게 처리합니까?"라는 질문으로 이해하는 것을 다루지 않습니다. : visible 또는 : hidden 둘 다 문서에 따라 표시를 찾고 있으므로 이것을 처리하지 않습니다. 내가 결정할 수있는 한, CSS 가시성을 처리 할 선택자가 없습니다. 해결 방법은 다음과 같습니다 (표준 jQuery 선택기, 더 압축 된 구문이있을 수 있음).
$ ( ". item"). each (function () {
if ($ (this) .css ( "visibility") == "hidden") {
// 보이지 않는 상태 처리
} else {
// 가시 상태 처리
}
});
|
토글 된 요소의 상태를 어떻게 결정합니까?
: visible 및 : hidden 선택기를 사용하여 요소가 축소되었는지 여부를 확인할 수 있습니다.
var isVisible = $ ( '# myDiv'). is ( ': visible');
var isHidden = $ ( '# myDiv'). is ( ': hidden');
가시성을 기반으로 요소에 대해 단순히 작업하는 경우 선택기 표현식에 : visible 또는 : hidden을 포함 할 수 있습니다. 예를 들면 :
$ ( '# myDiv : visible'). animate ({left : '+ = 200px'}, 'slow');
|
종종 무언가가 보이는지 여부를 확인할 때 즉시 바로 진행하여 다른 작업을 수행합니다. jQuery 체이닝은 이것을 쉽게 만듭니다.
따라서 선택기가 있고 표시되거나 숨겨져있는 경우에만 일부 작업을 수행하려면 filter ( ": visible") 또는 filter ( ": hidden")를 사용하고 원하는 작업과 연결하면됩니다. 갖다.
따라서 다음과 같이 if 문 대신 :
if ($ ( '# btnUpdate'). is ( ": visible"))
{
$ ( '# btnUpdate'). animate ({width : "toggle"}); // 버튼 숨기기
}
또는 더 효율적이지만 더 못 생겼습니다.
var button = $ ( '# btnUpdate');
if (button.is ( ": visible"))
{
button.animate ({width : "toggle"}); // 버튼 숨기기
}
한 줄로 모두 수행 할 수 있습니다.
$ ( '# btnUpdate'). filter ( ": visible"). animate ({width : "toggle"});
|
jQuery 문서에 따른 : visible 선택기 :
CSS 표시 값이 없습니다.
type = "hidden"인 양식 요소입니다.
너비와 높이는 명시 적으로 0으로 설정됩니다.
상위 요소가 숨겨져 있으므로 해당 요소가 페이지에 표시되지 않습니다.
가시성 : 숨김 또는 불투명도 : 0이있는 요소는 레이아웃에서 여전히 공간을 소비하므로 가시적 인 것으로 간주됩니다.
이것은 어떤 경우에는 유용하고 다른 경우에는 쓸모가 없습니다. 부모 가시성을 무시하고 요소가 보이는지 (display! = none) 확인하려면 .css ( "display") == 'none '는 더 빠를뿐만 아니라 가시성 검사를 올바르게 반환합니다.
표시 대신 가시성을 확인하려면 .css ( "visibility") == "hidden"을 사용해야합니다.
추가 jQuery 참고 사항도 고려하십시오.
: visible은 CSS 사양의 일부가 아닌 jQuery 확장이므로 : visible을 사용하는 쿼리는 기본 DOM querySelectorAll () 메서드에서 제공하는 성능 향상을 활용할 수 없습니다. : visible을 사용하여 요소를 선택할 때 최상의 성능을 얻으려면 먼저 순수한 CSS 선택기를 사용하여 요소를 선택한 다음 .filter ( ": visible")를 사용하십시오.
또한 성능이 걱정된다면 Now you see me… 성능 표시 / 숨기기 (2010-05-04)를 확인해야합니다. 다른 방법을 사용하여 요소를 표시하고 숨 깁니다.
|
이것은 나를 위해 작동하며 show () 및 hide ()를 사용하여 div를 숨기거나 표시합니다.
if ($ (this) .css ( 'display') == 'none') {
/ * 여기에 코드 입력 * /
} else {
/ * 대체 논리 * /
}
|
요소 가시성과 jQuery의 작동 방식
display : none을 사용하여 요소를 숨길 수 있습니다.가시성 : 숨김 또는 불투명도 : 0. 이 방법의 차이점 :
display : none은 요소를 숨기고 공간을 차지하지 않습니다.
visible : hidden은 요소를 숨기지 만 레이아웃에서 여전히 공간을 차지합니다.
opacity : 0은 요소를 "visibility : hidden"으로 숨기고 레이아웃에서 여전히 공간을 차지합니다. 유일한 차이점은 불투명도를 사용하면 요소를 부분적으로 투명하게 만들 수 있다는 것입니다.
if ($ ( '. target'). is ( ': hidden')) {
$ ( '. target'). show ();
} else {
$ ( '. target'). hide ();
}
if ($ ( '. target'). is ( ': visible')) {
$ ( '. target'). hide ();
} else {
$ ( '. target'). show ();
}
if ($ ( '. target-visibility'). css ( 'visibility') == 'hidden') {
$ ( '. target-visibility'). css ({
가시성 : "표시",
표시 : ""
});
} else {
$ ( '. target-visibility'). css ({
가시성 : "숨김",
표시 : ""
});
}
if ($ ( '. target-visibility'). css ( 'opacity') == "0") {
$ ( '. target-visibility'). css ({
불투명도 : "1",
표시 : ""
});
} else {
$ ( '. target-visibility'). css ({
불투명도 : "0",
디스플레이 : ""
});
}
유용한 jQuery 토글 방법 :
$ ( '. click'). click (function () {
$ ( '. target'). toggle ();
});
$ ( '. click'). click (function () {
$ ( '. target'). slideToggle ();
});
$ ( '. click'). click (function () {
$ ( '. target'). fadeToggle ();
});
|
일반 JavaScript를 사용하여이 작업을 수행 할 수도 있습니다.
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
true를 반환하십시오.
}
if (domObj.currentStyle && domObj.currentStyle [ "display"]! = "none"&& domObj.currentStyle [ "visibility"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ( "display")! = "none"&& cs.getPropertyValue ( "visibility")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
거짓 반환;
}
메모:
어디서나 작동
중첩 된 요소에 대해 작동
CSS 및 인라인 스타일에서 작동
프레임 워크가 필요하지 않습니다.
|
나는 CSS class .hide {display : none! important; }.
숨기기 / 표시를 위해 .addClass ( "hide") /. removeClass ( "hide")를 호출합니다. 가시성을 확인하기 위해 .hasClass ( "hide")를 사용합니다.
.toggle () 또는 .animate () 메서드를 사용하지 않으려는 경우 요소를 확인 / 숨기기 / 표시하는 간단하고 명확한 방법입니다.
|
데모 링크
$ ( '# clickme'). click (function () {
$ ( '# book'). toggle ( 'slow', function () {
// 애니메이션이 완료되었습니다.
alert ($ ( '# book'). is ( ": visible")); // <--- 보이는 경우 TRUE 숨겨진 경우 False
});
});